<template>
	<div class="main flex-v">
		<div class="ioutWrap">
			<div class="balanceTop">
				<div style="position: relative;z-index: 3;">
					<go-back aa='../volunteer/indexs'></go-back>
				</div>

				<span class="banTitle">{{fromurl==='indexs'?'志愿填报':'您的专属方案已生成'}}</span>

				<img class="topBg" src="~/static/images/volunteer_pic_bg.png" alt="">
			</div>
			<div class="programmeWrap">

				<scroller ref="scrollerBottom" style="top: 2.6rem;">
					<div class="programmeBox">
						<!-- <span class="textTitle">您的专属方案已生成</span> -->
						<div class="proSmBox flex-h" @click="gotos('1')">
							<div class="left flex1">
								<span class="lefttxt1 l1">
									平衡策略
								</span>
								<span class="lefttxt2">
									平衡考虑院校因素与专业因素，综合考察学科实力与专业匹配度
								</span>
							</div>
							<div class="right"><img src="~/static/images/vol1.png" alt=""></div>
						</div>
						<div class="proSmBox flex-h" @click="gotos('2')">
							<div class="left flex1">
								<span class="lefttxt1 l2">
									院校优先策略
								</span>
								<span class="lefttxt2">
									优先考虑院校因素，综合考察院校实力、院校地域、院校历史录取情况
								</span>
							</div>
							<div class="right"><img src="~/static/images/vol2.png" alt=""></div>
						</div>
						<div class="proSmBox flex-h" @click="gotos('3')">
							<div class="left flex1">
								<span class="lefttxt1 l3">
									专业优先策略
								</span>
								<span class="lefttxt2">
									优先考虑专业匹配度，综合考察院校因素与专业因素
								</span>
							</div>
							<div class="right"><img src="~/static/images/vol3.png" alt=""></div>
						</div>
						<!-- <div class="proBotter flex-h" v-show="fromurl=='indexs'"> -->
						<div class="proBotter flex-h">
							<span class="spBtn" type="primary" @click="commonJs.gosto('stepOne')">创建新方案</span>

						</div>
						<div class="proBotter flex-h" v-show="fromurl=='stepThree'">
							<div class="lefts flex1">
								<span class="tex1">生涯测评</span>
								<span class="tex2">填报方案更精准</span>
							</div>
							<div class="rights flex1">
								<span class="tex1">人工服务</span>
								<span class="tex2">一对一定制方案</span>
							</div>
							
						</div>
						<div style="width: 7.5rem;height: 3.5rem;"></div>
					</div>

				</scroller>
				<!-- <div style="width: 7.5rem;height: 3.5rem;"></div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import axios from '~/plugins/axios';
	import goBack from '~/components/goBack'
	import axios1 from '~/plugins/axios1'
	import ls from 'store2'
	import {
		setTimeout
	} from 'timers';
	export default {
		head: {},
		components: {
			goBack
		},
		data() {
			return {
				fromurl: '',
				userType: ls.get('userData').userType
			}
		},
		created() {
			this.commonJs.gologins();
			this.fromurl = ls.get('preUrl');

		},
		methods: {
			// programme
			createCase(tysp) {
				axios1.posts('/volunteer/getBalance?type=' + tysp + '&userType=' + this.userType).then(res => {
					if (res.code === '0') {
						ls.set('caseData', res.data)
						setTimeout(() => {
							// this.$vux.loading.hide()
							this.commonJs.gosto('balance', tysp)
						}, 50)

					} else {
						this.$vux.toast.text('系统繁忙，请稍后再试');
						this.$vux.loading.hide()
					}

				}).catch((error) => {
					this.$vux.toast.text(error);
				})
			},
			gotos(tys) {
				this.$vux.loading.show({
					text: '正在拼命加载数据~'
				})
				// this.createCase(tys)
				this.commonJs.gosto('balance', tys)
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});

			},
			fun() {
				this.$router.replace({
					path: '../volunteer/indexs'

				})

			}

		},
		destroyed: function() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},

		mounted: function() {
			this.$vux.loading.hide()
			if(this.commonJs.isTerminal()=='isAndroid'){
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
			// this.commonJs.aback('../volunteer/indexs');

		},
		computed: {

		},
		watch: {}
	}
</script>

<style scoped lang="less">
	.ioutWrap {
		width: 100%;
		min-height: 100vh;

		background: #fff;

		.balanceTop {
			// z-index: 2;
			width: 100%;
			height: 2.6rem;
			background: #fff;
			position: relative;
			background: rgba(255, 255, 255, 1);


			.topBg {
				position: absolute;
				right: 0;
				top: 0;
				width: 7.5rem;
				height: auto;
			}

			.banTitle {
				display: block;
				height: 0.62rem;
				font-size: 0.5rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.8rem;
				display: block;
				margin-top: 0.4rem;
				margin-left: 0.3rem;
			}

		}
	}

	.programmeWrap {
		width: 7.5rem;
		min-height: 100vh;
		height: auto;
		.programmeBox {
			width: 100%;
			height: 15rem;
			padding: 0.1rem 0.3rem 0.3rem;
			box-sizing: border-box;

			.textTitle {
				font-size: 0.5rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.8rem;
				display: block;
				margin-bottom: 0.6rem;
			}

			.proSmBox {
				margin-bottom: 0.2rem;
				width: 100%;
				height: 2.4rem;

				box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				border-radius: 0.1rem;

				.left {
					padding-left: 0.3rem;
					box-sizing: border-box;

					.lefttxt1 {
						font-size: 0.4rem;

						font-weight: bold;

						line-height: 0.6rem;
						display: block;
					}

					.l1 {
						color: rgba(148, 210, 103, 1);
					}

					.l2 {
						color: rgba(254, 192, 62, 1);
					}

					.l3 {
						color: rgba(90, 178, 241, 1);
					}

					.lefttxt2 {
						display: block;
						height: auto;
						font-size: 0.24rem;

						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						line-height: 0.4rem;
					}
				}

				.right {
					width: 2.43rem;
					height: 2.4rem;

					img {
						display: block;
						width: 100%;
						height: 2.4rem;
					}
				}
			}

			.proBotter {
				width: 100%;
				height: 1.6rem;

				.lefts,
				.rights {
					width: 100%;
					height: 1.6rem;
					background: rgba(255, 255, 255, 1);
					border-radius: 0.1rem;
					border: 0.02rem solid rgba(238, 238, 238, 1);
					padding: 0.3rem;
					box-sizing: border-box;

					.tex1 {
						display: block;
						height: 0.5rem;
						font-size: 0.36rem;
						font-weight: bold;
						color: rgba(108, 191, 32, 1);
						line-height: 0.5rem;
					}

					.tex2 {
						display: block;
						height: 0.37rem;
						font-size: 0.26rem;

						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						line-height: 0.37rem;
					}
				}

				.lefts {
					margin-right: 0.3rem;
					background: url('~/static/images/volunteer_pic_career.png') no-repeat;
					background-size: 100% 100%;

				}

				.rights {
					margin-right: 0.3rem;
					background: url('~/static/images/volunteer_pic_consult.png') no-repeat;
					background-size: 100% 100%;

				}

				.spBtn {
					display: block;
					width: 3.35rem;
					height: 0.9rem;
					border-radius: 0.1rem;
					text-align: center;
					border: 0.02rem solid rgba(238, 238, 238, 1);
					font-size: 0.36rem;
					font-weight: bold;
					color: rgba(153, 153, 153, 1);
					line-height: 0.9rem;
					margin: 0.2rem auto;
				}
			}


		}

	}
</style>
